<template>
	<view class="content">

		<view class="header">
			<view class="ipt-box">
				<input v-model="townText" type="text" value="" placeholder="请输入您要找的村子名称"
					placeholder-class="plac-class" />
				<image src="/static/search1.png" mode="" @click="townSearch"></image>
			</view>
			<view class="header-right" @click="townText = ''">
				<span>取消</span>
			</view>
		</view>
		<!-- village -->
		<view class="village-box">
			<view class="village-item" v-for="(item,index) in villageList" :key="index">
				<view class="flexs">
					<view class="village-item-left">
						<view class="adress">{{item.name}}</view>
						<view class="adressPosini">{{item.totalcount}}</view>
					</view>
					<view class="village-item-right">

						<image src="/static/zhankai.png" mode="" v-if="item.status" @tap="zhankai(index)"></image>
						<image src="/static/xia.png" mode="" v-else @tap="zhankai(index)"></image>
					</view>
				</view>
				<view class="rideoGet" v-if="item.status">
					<view class="villPositi">
						<view class="posiIt" >
							<text style="font-size: 30rpx;" class="">阀门</text>
							<view class="posiIt-right">
								<view class="huhao" @tap="$navTo('/pagesB/inspect/village?allalltype=2&alltype=2&listtype=2&task_id='+item.id)">
									查询
								</view>
								<view v-if="item.valve_count>0" class="huhao" @tap="$navTo('/pagesB/inspect/village?allalltype=2&alltype=2&listtype=1&task_id='+item.id)">
									检查
								</view>
								<view v-if="item.valve_count>0" class="ding">{{item.valve_count}}</view>
							</view>
						</view>
						
						<view class="posiIt" >
							<text style="font-size: 30rpx;" class="">调压箱</text>
							<view class="posiIt-right">
								<view class="huhao" @tap="$navTo('/pagesB/inspect/village?allalltype=1&alltype=4&listtype=2&task_id='+item.id)">
									查询
								</view>
								<view  v-if="item.box_count>0" class="huhao" @tap="$navTo('/pagesB/inspect/village?allalltype=1&alltype=4&listtype=1&task_id='+item.id)">
									检查
								</view>
								<view v-if="item.box_count>0"  class="ding">{{item.box_count}}</view>
							</view>
						</view>
						
						<view class="posiIt" >
							<text style="font-size: 30rpx;" class="">场站设备</text>
							<view class="posiIt-right">
								<view class="huhao" @tap="$navTo('/pagesB/inspect/village?allalltype=3&alltype=1&listtype=2&task_id='+item.id)">
									查询
								</view>
								<view v-if="item.factory_count>0" class="huhao" @tap="$navTo('/pagesB/inspect/village?allalltype=3&alltype=1&listtype=1&task_id='+item.id)">
									检查
								</view>
								<view  v-if="item.factory_count>0"  class="ding">{{item.factory_count}}</view>
							</view>
						</view>
						
						<view class="posiIt" >
							<text style="font-size: 30rpx;" class="">公司设备</text>
							<view class="posiIt-right">
								<view class="huhao" @tap="$navTo('/pagesB/inspect/village?allalltype=4&alltype=3&listtype=2&task_id='+item.id)">
									查询
								</view>
								<view v-if="item.company_count>0" class="huhao" @tap="$navTo('/pagesB/inspect/village?allalltype=4&alltype=3&listtype=1&task_id='+item.id)">
									检查
								</view>
								<view v-if="item.company_count>0"  class="ding">{{item.company_count}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fu" v-if="villageList.length == 0">
				您没有负责的村子
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jiantou: true,
				username: '',
				password: '',
				// array: ['安装工','检测工','维修工'],
				index: 0,
				userinfo: {},
				value: '', //搜索关键词
				installList: [], //安装列表
				dosearch: false,
				showAcount: false,
				page: 1,
				villageList: [],
				active: 0,
				current: '',
				// 展开控制  相当于一个新索引
				showIndex: '',
				imgFlag: false,
				token: '',
				rideo: [{
						id: 1,
						name: '阀门'
					},
					{
						id: 2,
						name: '调压箱'
					}
				],
				towId: '',
				townText: ''
			};
		},
		onLoad(option) {
			this.towId = option.id
		},
		onShow() {
			uni.getStorage({
				key: 'token'
			}).then(da => {
				this.token = da[1].data
			})
			setTimeout(() => {
				this.getTown()
			}, 10)
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
			this.getTown()
		},
		onReachBottom() {
			if (this.page >= this.totwn) {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
				return
			}
			this.page=this.page+1
			this.getTown()
		},
		watch: {
			townText(e) {
				if (!e) {
					this.getTown()
				}
			}
		},
		methods: {
			zhankai(index) {
				console.log(index);
				this.villageList[index].status = !this.villageList[index].status
			},
			// 获取安装数据
			getTown() {
				let that = this
				that.$request.request({
					url: 'equipment/village_list',
					method: 'POST',
					data: {
						token: that.token,
						page: that.page,
						township: that.towId,
						keyword: that.townText
					}
				}).then(res => {
					if (res.data.code == 1) {
						res.data.data.list.forEach(item => {
							this.$set(item, 'status', false)
						})
						that.villageList =that.villageList.concat(res.data.data.list) 
						that.totwn = res.data.data.page_count
					}
					console.log(that.villageList)
				})
			},
			bottonShow(index) {
				console.log('index', index)
				if (this.showIndex == index + '') {
					this.showIndex = null
					// this.jiantou = !this.jiantou
				} else {
					this.showIndex = index + ''
					// this.jiantou = !this.jiantou
				}
			},
			dadioChange(index) {
				console.log(index + '')
				this.current = index + ''
			},
			townSearch() {
				this.villageList = []
				if (this.townText == '') {
					uni.showToast({
						title: '请输入您要找的村子',
						icon: 'none'
					})
					this.getTown()
					return
				}
				this.getTown()
			},
			getType(id, ids, name) {
				uni.navigateTo({
					url: '/pagesB/repairlist/repairlist?id=' + id + '&ids=' + ids + '&name=' + name
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.uni-radio {
		background-color: #ccc !important;

		.uni-radio-wrapper {
			background-color: #ccc !important;

			.uni-radio-input .uni-radio-input-checked {
				background-color: #ccc !important;
			}
		}
	}

	.fu {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		color: #999;
		font-size: 32rpx;
	}

	page {
		background-color: #F5F5F5;
		// padding-bottom: 200rpx;
		// margin-bottom: 150rpx;
	}

	.content {
		padding-bottom: 140rpx;
	}

	.header1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx;
		background-color: #fff;

		.header-left {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}
		}

		.header-right {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #333;

			image {
				width: 52rpx;
				height: 52rpx;
				margin-right: 10rpx;
			}
		}
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		height: 80rpx;
		width: 100%;
		background-color: #003690;
		padding: 0 40rpx;

		.ipt-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;
			width: 514rpx;
			height: 52rpx;
			background-color: #fff;
			border-radius: 24rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.header-right {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #E2ECFB;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.test-code:active {
		background: rgba(69, 82, 202, 0.4);
		color: #fff;
	}

	.plac-class {
		font-size: 32rpx;
		color: #999;
	}

	// nav
	.nav {
		width: 100%;
		height: 80rpx;
		background-color: #fff;

		.nav-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 50%;
			margin: 0 auto;
			line-height: 76rpx;

			span {
				padding: 0 10rpx;
				font-size: 32rpx;
				color: #333;
				border-bottom: 4rpx solid transparent;
			}

			.current {
				color: #003690;
				border-bottom: 4rpx solid #003690;
			}
		}
	}

	.village-box {
		padding: 0 24rpx;
	}

	// danger
	.village-item {
		position: relative;
		box-sizing: border-box;
		// width: 690rpx;
		// padding:20rpx 30rpx;
		margin: 18rpx auto 0;

		// box-shadow:0px 3px 4px rgba(0,30,57,0.15);
		.flexs {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background: #EBF2FF;
			border-radius: 0px 0px 6rpx 6rpx;
			box-shadow: 0px 4rpx 6rpx 0px rgba(0, 30, 57, 0.1);
			color: #000000;
			padding: 0 20rpx;

			// padding-left: 20rpx;
			.village-item-left {
				display: flex;
				align-items: center;
				position: relative;

				.adress {
					font-size: 32rpx;
					color: #000000;
				}

				.adressPosini {
					position: absolute;
					top: -10upx;
					right: -30upx;
					width: 44upx;
					height: 32upx;
					background-color: #d10000;
					opacity: 0.56;
					color: #fff;
					border-radius: 20upx;
					text-align: center;
					line-height: 32upx;
					font-size: 24upx;
				}
			}
		}

		.villPositi {
			display: flex;
			flex-direction: column;
			padding: 0 16rpx 0 44rpx;
			background-color: #fff;
			box-shadow: 0px 2px 3px 0px rgba(0, 30, 57, 0.1);
			border-radius: 10rpx;

			.posiIt {
				margin-bottom: 28rpx;
				position: relative;
				padding-top: 28rpx;
				display: flex;
				justify-content: space-between;

				.ding {
					// position: absolute;
					top: 14rpx;
					left: 72rpx;
					width: 30rpx;
					height: 30rpx;
					opacity: 0.56;
					background: #d10000;
					font-size: 24rpx;
					font-weight: 400;
					color: #fff;
					border-radius: 15rpx;
					text-align: center;
					line-height: 30rpx;
				}

				.huhao {
					width: 100upx;
					height: 48upx;
					border: 2upx solid #003690;
					border-radius: 24upx;
					font-size: 28upx;
					color: #003690;
					margin-right: 30upx;
					text-align: center;
				}

				.posiIt-right {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.getRi {
				width: 80rpx;
				height: 40rpx;
				border: 2rpx solid #003690;
				border-radius: 30rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.village-item-right {
			display: flex;
			align-items: center;

			image {
				width: 56rpx;
				height: 56rpx;
				color: #fff;
			}
		}
	}
</style>
